import mapIconSets from "./mapIconSets";
import Vue from 'vue'
import DivIcon from '@/views/warning/components/AirportIcon.vue';
const DivIconExtend = Vue.extend(DivIcon);

export default {
  runningDraw(handle, airports, airlines) {
    const that = handle;
    // 渲染机场
    this.renderAirportsWithProgress(handle, airports);

    // 渲染航线
    let planes = [];
    airlines.forEach((poi) => {
      let line = L.polyline([[poi[0][1], poi[0][0]], [poi[1][1], poi[1][0]]], { color: "#67C23A", weight: 1 }).addTo(
        handle.map
      );
      line.on("click", (e) => {
        // 点击线条，通知弹出相应的窗体
        that.$refs.runningModal.showAirlineInfo();
        planes.push([e.latlng.lat, e.latlng.lng]);
        // console.log(JSON.stringify(planes));
      });
      handle.layer.push(line);
    });

    // 渲染飞机
    var plants = [[27.566721430409736, 105.3369140625], [25.383735254706867, 106.32568359375001], [22.674847351188536, 107.53417968750001], [29.32472016151103, 104.85351562500001], [26.05678288577881, 107.11669921875], [28.97450653430241, 105.86151123046876], [26.78484736105119, 108.67675781250001], [30.164126343161097, 105.79833984375001], [29.017748018496047, 111.16516113281251], [30.4060442699695, 107.52868652343751], [30.183121842195515, 112.91748046875001], [29.935895213372444, 118.52050781250001], [30.670990790779197, 109.1326904296875], [30.80791068136646, 111.24206542968751], [31.208103321325254, 112.14294433593751], [31.08586989620833, 113.07128906250001], [30.90222470517144, 109.78088378906251], [31.541089879585837, 116.3232421875], [32.43561304116276, 106.80908203125001], [37.64903402157866, 114.98291015625001], [34.88593094075317, 105.24902343750001], [34.57895241036948, 105.16113281250001], [29.49698759653577, 93.16406250000001], [30.088107753367257, 98.98681640625001], [26.52956523826758, 103.18359375000001]];
    var centers = [];
    plants.forEach((loc) => {
      centers.push({
        latitude: loc[0],
        longitude: loc[1],
      });
    });
    // 渲染到地图上
    handle.renderMarkers(centers, { icon: mapIconSets.plant }, false);
  },

  weatherDraw(handle, airports, callback) {
    const supermap = L.supermap;
    const that = this;
    const option = require('../charts/moveOptions');
    let layer = supermap.echartsLayer(option).addTo(handle.map);
    handle.layer.push(layer);

    // 渲染机场
    this.renderAirports(handle, airports, callback);

    // 渲染天气区域
    handle.layer.push(L.ellipse([31.992499, 118.580933], [230000, 160000], 0, { color: 'red', weight: 0, fillOpacity: 0.4 }).addTo(handle.map));

    handle.layer.push(L.ellipse([34.261189, 108.973389], [250000, 190000], 0, { color: 'yellow', weight: 0, fillOpacity: 0.4 }).addTo(handle.map));
  },

  airFlightDraw(handle, airports, callback) {
    const option = require('../charts/moveOptions');
    let layer = L.supermap.echartsLayer(option).addTo(handle.map);
    handle.layer.push(layer);
    // 渲染机场
    this.renderAirports(handle, airports, callback);
  },

  sysSearchDraw(handle, airports, callback) {
    const option = require('../charts/moveOptions');
    let layer = L.supermap.echartsLayer(option).addTo(handle.map);
    handle.layer.push(layer);
    // 渲染机场
    this.renderAirports(handle, airports, callback);

    // 渲染天气区域
    handle.layer.push(L.ellipse([31.992499, 118.580933], [230000, 160000], 0, { color: 'red', weight: 0, fillOpacity: 0.4 }).addTo(handle.map));

    handle.layer.push(L.ellipse([34.261189, 108.973389], [250000, 190000], 0, { color: 'yellow', weight: 0, fillOpacity: 0.4 }).addTo(handle.map));
  },

  getAirportCircleSvg(data) {
    let cirlen = 30 * Math.PI * 2;
    // 总架数
    var total = data.reduce(function (a, b) {
      return a + b;
    }, 0);
    // 计算占比
    let percent = [];
    var perSum = 0;
    data.forEach((n) => {
      var per = (n + perSum) / total;
      var dashlen = cirlen * per;
      percent.push([dashlen, cirlen - dashlen].join(","));
      perSum += n;
    });
    percent.reverse();
    //<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70"></svg>
    let svg = '';
    percent.forEach((p, i) => {
      svg += `<circle fill="transparent" class="pie-bar${i + 1}" stroke-width="10" cx="35" cy="35" r="30" style="stroke-dasharray:${p}"></circle>`
    });
    return `<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">${svg}</svg>`;
  },

  renderAirports(handle, airports, callback) {
    airports.forEach((loc) => {
      console.log(loc)
      var center = {
        latitude: loc.location[1],
        longitude: loc.location[0],
      };
      // 渲染到地图上
      let marker = handle.setMark(center, {
        icon: L.divIcon({
          className: "map-airport-icon",
          iconAnchor: [18, 18],
          html: `<div class='map-airport-box'><div class='map-airport-title'>${loc.name}</div><img src='/assets/imgs/airport_icon.png' width='36' height='36' /></div>`,
        }),
      }
      );
      marker.on('click', () => {
        callback != undefined && callback();
      })
      handle.markers.push(marker);
    });
  },

  renderAirportsWithProgress(handle, airports, callback) {
    airports.forEach((loc) => {
      var center = {
        latitude: loc.location[1],
        longitude: loc.location[0],
      };
      // 渲染到地图上
      let marker = handle.setMark(center, {
        icon: L.divIcon({
          className: "map-airport-icon",
          iconAnchor: [18, 18],
          html: new DivIconExtend({
            propsData: {
              name: loc.name,
              score: Math.ceil(loc.score * 100)
            },
          }).$mount().$el,
        }),
      }
      );
      marker.on('click', () => {
        callback != undefined && callback();
      })
      handle.markers.push(marker);
    });
  },
  getAngle(lat1, lon1, lat2, lon2) {
    const y = Math.sin(lon2 - lon1) * Math.cos(lat2);
    const x =
      Math.cos(lat1) * Math.sin(lat2) -
      Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
    const angle = Math.atan2(y, x);
    return angle;
  },
}